<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html 	xmlns="http://www.w3.org/1999/xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:fn="http://java.sun.com/jsp/jstl/functions"
		xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
	<h:title></h:title>
	<style type="text/css" >
		.ui-widget {
		    font-size: 11px !important;
		}
		.ui-selectonemenu {
			top: 5px;
		}
	</style>
</h:head>
	<h:body>
		<h:form enctype="multipart/form-data">
			<div id="header">
			    <ui:insert name="header">
			    	<ui:include src="/domotic/resources/templates/header.xhtml"/>
			    </ui:insert>
			</div>
			
			<div id="content">
				<p:panel header="Cadastro de Ações" style="min-height: 410px;">
					<h:panelGrid columns="2">
						<span>Código: </span><p:inputText disabled="true"></p:inputText>
						<span>Nome: </span><p:inputText title="Nome" maxlength="80" size="60"></p:inputText>
						<!-- <p:selectBooleanCheckbox /> -->
					</h:panelGrid>
					
					<h:panelGrid columns="5">
						<h:outputText value="Atuador" style="color: red;"></h:outputText>
						<h:outputText value="Valor 1" style="color: red;"></h:outputText>
						<h:outputText value="Valor 2" style="color: red;"></h:outputText>
						<h:outputText value="Valor 3" style="color: red;"></h:outputText>
						<h:outputText value="Valor 4" style="color: red;"></h:outputText>
						
						<p:selectOneMenu title="Componente" maxlength="80" size="140" style="width: 140px;">
							<f:selectItem itemLabel="Select..." itemValue="0"/>
							<f:selectItem itemLabel="Atuador 1" itemValue="1" />
							<f:selectItem itemLabel="Atuador 2" itemValue="2" />
							<f:selectItem itemLabel="Atuador 3" itemValue="3" />
						</p:selectOneMenu>
						<p:inputText></p:inputText>
						<p:inputText></p:inputText>
						<p:inputText></p:inputText>
						<p:inputText></p:inputText>
					</h:panelGrid>
					<div style="min-height: 6px;" />
					
					<p:button value="Cadastrar"></p:button>
					<p:button value="Alterar" disabled="true"></p:button>
					<p:button value="Excluir" disabled="true"></p:button>
					<div style="min-height: 10px;" />
				</p:panel>
				<!-- Remove, find a bug when messages displayed -->
				<p:growl id="messages" showDetail="true"/>
			</div>

			<p:dialog header="Adicionar uma nova Ação" widgetVar="addActionDialog" modal="true" height="200" width="400" showEffect="explode" hideEffect="explode">  
				<h:panelGrid columns="2">
					<span>Ação: </span>
					<p:selectOneMenu title="Ação" maxlength="80" size="140" style="width: 150px;">
						<f:selectItem itemLabel="Select One" itemValue="0"/>
						<f:selectItem itemLabel="Ação 1" itemValue="1" />
						<f:selectItem itemLabel="Ação 2" itemValue="2" />
						<f:selectItem itemLabel="Ação 3" itemValue="3" />
					</p:selectOneMenu>
				</h:panelGrid>
				<div style="min-height: 6px;" />
				<div align="center">
					<p:commandButton value="Adicionar" onclick="alert('Ok'); addActionDialog.hide();"></p:commandButton>
					<p:commandButton value="Cancelar" onclick="addActionDialog.hide();"></p:commandButton>
				</div>
			</p:dialog>
			
			<p:dialog header="Adicionar uma nova Condição" widgetVar="addConditionDialog" modal="true" height="200" width="400" showEffect="explode" hideEffect="explode">  
				<h:panelGrid columns="2">
					<span>Condição: </span>
					<p:selectOneMenu title="Condição" maxlength="80" size="140" style="width: 150px;">
						<f:selectItem itemLabel="Select One" itemValue="0"/>
						<f:selectItem itemLabel="Condição 1" itemValue="1" />
						<f:selectItem itemLabel="Condição 2" itemValue="2" />
						<f:selectItem itemLabel="Condição 3" itemValue="3" />
					</p:selectOneMenu>
				</h:panelGrid>
				<div style="min-height: 6px;" />
				<div align="center">
					<p:commandButton value="Adicionar" onclick="alert('Ok'); addConditionDialog.hide();"></p:commandButton>
					<p:commandButton value="Cancelar" onclick="addConditionDialog.hide();"></p:commandButton>
				</div>
			</p:dialog> 
			<div id="footer">
			  <ui:insert name="footer">
					<ui:include src="/domotic/resources/templates/footer.xhtml"/>
			  </ui:insert>
			</div>

		</h:form>
	</h:body>
</html>